/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2024-12-20 17:52:41
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-02-25 12:01:05
 * @FilePath: \my-book-react\src\pages\home\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
// import { Space } from '@taoyage/react-mobile-ui';

// import { Swiper, SwiperSlide } from 'swiper/react';
// import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
// import 'swiper/css';
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';
// import 'swiper/css/scrollbar';
import { ErrorBlock, Swiper, Space, Image } from '@/bases';
import Loading from '@/components/loading';
import Header from '@/pages/home/compoments/header/index';
import Navbar from '@/pages/home/compoments/navbar/index';
import Popular from '@/pages/home/compoments/popular/index';
import Recommend from '@/pages/home/compoments/recommend/index';
import LimitedRead from '@/pages/home/compoments/limitedRead/index';
import Ranking from '@/pages/home/compoments/ranking/index';

// import axiosInstance from '@/hooks/useRequest/axiosInstance';
// import useSWR from 'swr';
import { useRequest } from '@/hooks/useRequest';
import api from '@/pages/home/api';
import { IHomeData } from '@/pages/home/types';
import { px2rem } from '@/utils/unit';
import styles from './index.module.scss';
// const fetcher = (url: string) => axiosInstance.request({ url });
const Home: React.FC = () => {
  const { data, error } = useRequest<IHomeData>({ url: api.getHomeData });
  // const { data, error } = useRequest<any>({ url: 'test' });
  // console.log(data);
  if (error) {
    return <ErrorBlock />;
  }
  if (!data) {
    return <Loading />;
  }
  // React.useEffect(() => {
  //   axiosInstance.request({
  //     url: '/api/v1/home',
  //   });
  // }, []);
  return (
    <div className={styles.home}>
      <Header />
      <Space direction="vertical" gap={px2rem(20)}>
        <Swiper loop autoplay style={{ '--border-radius': '12px' }}>
          {data!.banner.map((item, index) => (
            <Swiper.Item key={index}>
              {/* <img src={item.src} alt={item.alt} height="100%" width="100%" /> */}
              <Image src={item.src} alt={item.alt} height="100%" width="100%" />
            </Swiper.Item>
          ))}
        </Swiper>
        <Navbar />
        <Popular />
        <Recommend />
        <LimitedRead />
        <Ranking />
      </Space>

      {/* <Swiper
        autoplay
        loop
        modules={[Navigation, Pagination, Scrollbar]}
        navigation // 对应 Navigation
        pagination={{ clickable: true }} // 对应 Pagination
        scrollbar={{ draggable: true }} // 对应 Scrollbar
      >
        {data.banner.map((item, index) => (
          <SwiperSlide key={index}>
            <img src={item.src} alt={item.alt} height="100%" width="100%" />
          </SwiperSlide>
        ))}
      </Swiper> */}
    </div>
  );
};

export default Home;
